package myJs.browse

import myJs.Implicits._
import myJs.MainCp
import myJs.cps.BootstrapTableCp.Column
import myJs.cps._
import myJs.myPkg._
import myJs.myPkg.jquery._
import myJs.myPkg.tabs.{Tab, Tabs}
import myJs.tool.Pojo._
import myJs.tool.Tool
import org.scalajs.dom.URLSearchParams
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks._
import slinky.web.html._

import scala.collection.immutable.SeqMap
import scala.concurrent.ExecutionContext.Implicits.global
import scala.scalajs.js
import scala.scalajs.js.Dynamic.{global => g}
import scala.scalajs.js.JSConverters._
import myJs.Implicits._

/**
 * Created by yz on 21/1/2022
 */
@react object Cp {

  type Props = Unit

  val curPage = Browse

  val component = FunctionalComponent[Props] { props =>

    val location = ReactRouterDOM.useLocation()
    val searchParams = new URLSearchParams(location.search)
    val geneType = searchParams.get("geneType").null2Empty
    val tabP = searchParams.get("tab").null2Empty
    val myInitTab = List("mlRna", "cRNA", "cellType", "dataset")(0)
    val initTab = if (tabP.isBlank) myInitTab else tabP
    val (tab, setTab) = useState(initTab)

    object FTool {

      def tabChange = (v: String) => {
        setTab(v)
      }

    }
    MainCp(title = curPage.titleStr)(

      div(className := "panel panel-default",
        div(className := "panel-heading",
          h3(className := "panel-title",
            curPage.titleStr
          )
        ),
        div(className := "panel-body",

          Tabs(id = "tab", activeKey = tab, onSelect = FTool.tabChange, transition = false)(
            Tab(eventKey = "mlRna", title = "mRNA and lncRNA")(
              div(style := Style(marginTop = "20px"),
                MlRnaCp(geneType = geneType)
              )
            ),
            Tab(eventKey = "cRNA", title = "circRNA")(
              div(style := Style(marginTop = "20px"),
                CRnaCp(geneType = geneType)
              )
            ),
            Tab(eventKey = "cellType", title = "Cell Type")(
              div(style := Style(marginTop = "20px"),
                CellTypeCp()
              ),
            ),
            Tab(eventKey = "dataset", title = "Dataset")(
              div(style := Style(marginTop = "20px"),
                DatasetCp()
              )
            ),
          ),


        ),


      )


    )


  }

  object STool {


  }

}
